<template>
  <van-pull-refresh v-model="loading" @refresh="refresh">
    <div class="find">
      <hmNavBar title="发现" :showIcon="false"></hmNavBar>
      <div class="content">
        <findCell title="面试技巧"></findCell>
        <technicItem
          v-for="(item, index) in technicList"
          :key="index"
          :info="item"
        ></technicItem>
        <findCell title="市场数据"></findCell>
        <van-tag class="tag" color="#eceaea" text-color="#737489">{{
          chartList.city
        }}</van-tag>
        <van-tag class="tag" color="#eceaea" text-color="#737489">{{
          chartList.position
        }}</van-tag>
        <!-- 动画
      1:高度变化 产生动画
        默认高度:3个选项的高度
             chart总高度求出来:  dom.scrollHeight/chartList.yearSalary.length*3
      2:点击展开
            修改shcrt整的height为总高度
       3:点击收起
            修改shcrt整的height为总3个选项高度
      
       -->
        <ul class="chart" ref="chart">
          <li
            class="chart-item"
            v-for="(item, index) in chartList.yearSalary"
            :key="index"
          >
            <!-- v-show="index < totalLook" -->
            <!-- v-show="index < totalLook" -->
            <div class="c1">{{ item.year }}</div>
            <div class="c2">
              <!-- // :style="{width:值}" -->
              <div
                class="num"
                :style="{
                  width: (item.salary / chartList.topSalary) * 100 + '%'
                }"
              >
                ¥{{ item.salary }}
              </div>
            </div>
            <div class="c3">
              <div v-if="item.percent !== undefined">
                <i class="iconfont up" v-if="item.percent >= 0">&#xe651;</i>
                <i class="iconfont down" v-else>&#xe64e;</i>
              </div>
            </div>
            <div class="c4">
              <span v-if="item.percent !== undefined">
                {{ item.percent }}%
              </span>
            </div>
          </li>
        </ul>
        <div v-if="totalLook === 3" class="look-more" @click="lookMore">
          查看更多<i class="iconfont">&#xe652;</i>
        </div>
        <div v-else class="look-more" @click="lookLess">
          收起<i class="iconfont r180">&#xe652;</i>
        </div>
        <findCell
          title="面经分享"
          @click.native="$router.push('/home/shareList')"
        ></findCell>
        <div>
          <shareItem
            v-for="(item, index) in shareList"
            :key="index"
            :info="item"
          ></shareItem>
        </div>
      </div>
    </div>
  </van-pull-refresh>
</template>
<script>
import findCell from './findCell'
import technicItem from './technicItem'
import shareItem from './shareItem'
import { articlesTechnic, chartDataHot, articlesShare } from '@/api/find'
export default {
  name: 'find',
  components: {
    findCell,
    technicItem,
    shareItem
  },
  data () {
    return {
      technicList: [],
      chartList: '',
      totalLook: 3,
      shareList: [],
      loading: false // 是否处于加载中
    }
  },
  async created () {
    /*
    vuex暂存数据
       1:在vuex定义一个变量与方法用于存储相应数据
       2:在created存储
          存储前能不能判断 一下,如果有值,就不存储,直接获取
                              如果没有值,就存储    
    */
    /*
  组件缓存
     1:找到该组件所对应的路由出口,同时对该组件来一个name命名
     2: <keep-alive>  <router-view> </router-view> </keep-alive>
        使用keep-alive将路由出口用标签包起来,该路由出口所有组件都会被缓存
    3:如果希望某个组件被 缓存 
        <keep-alive include="name的值a,name的值b">
    4:只是不想缓存某个组件,其它组件都缓存 
         <keep-alive exclude="name的值a,name的值b">   
  */

    // if (this.$store.state.findArr.length) {
    //   // 直接取
    //   this.technicList = this.$store.state.findArr[0]
    //   this.chartList = this.$store.state.findArr[1]
    //   this.shareList = this.$store.state.findArr[2]
    // } else {
    // const res = await articlesTechnic()
    // this.technicList = res.data.data.list
    // const res2 = await chartDataHot()
    // res2.data.data.yearSalary.reverse()
    // this.chartList = res2.data.data
    // const res3 = await articlesShare({
    //   limit: 3
    // })
    // this.shareList = res3.data.data.list
    // window.console.log(res3)
    // // this.$store.commit('setFindArr', [
    // //   this.technicList,
    // //   this.chartList,
    // //   this.shareList
    // //   ])
    // // }

    // this.$nextTick(() => {
    //   // 保证数据已渲染完成后执行
    //   this.$refs.chart.style.height =
    //     (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) * 3 +
    //     'px'
    // })
    /*
路由传参
    传:this.$router.push("/xxx?参数名=值")
         this.$router.push({
           path:"/xxx",
           query:{
             参数名:值
           }
         })
    收:this.$route.query.参数名
动态路由匹配
   1:配制路由
      {
        path:"/xxx/:参数名?",
        compoent:xxx
      }
   2:传参
     this.$router.push("/xxx/值")
   3:收
     this.$route.params.参数名 
     /xxx  不可以
     希望/xxx也能访问 在 path:"/xxx/:参数名?"
 name传参
    1:配制路由
       {
         path:"/xxx",
         name:"xxx",
         component:xxx
       }
    2:传
       this.$router.push({
         name:"xxx",
         query:{
           参数名:值
         },
         params:{
           参数名:值   // 不可刷新
         }
       })
    3:收:
      this.$route.query.参数名    url体现
      this.$route.params.参数名  不会体现在url,刷新就没了

*/

    this.refresh()
  },
  mounted () {
    window.console.log('mounted')
  },
  beforeDestroy () {},
  methods: {
    lookMore () {
      this.totalLook = 9999
      this.$refs.chart.style.height = this.$refs.chart.scrollHeight + 'px'
    },
    lookLess () {
      this.totalLook = 3
      this.$refs.chart.style.height =
        (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) * 3 +
        'px'
    },
    // 刷新方法
    async refresh () {
      const res = await articlesTechnic()
      this.technicList = res.data.data.list
      const res2 = await chartDataHot()
      res2.data.data.yearSalary.reverse()
      this.chartList = res2.data.data
      const res3 = await articlesShare({
        limit: 3
      })
      this.shareList = res3.data.data.list
      this.$nextTick(() => {
        // 保证数据已渲染完成后执行
        this.$refs.chart.style.height =
          (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) *
            3 +
          'px'
      })
      this.loading = false
    }
  },
  activated () {
    const _top = this.$route.meta.scrollTop || 0
    window.scrollTo(0, _top)
    window.console.log(this.$route.meta.scrollTop)
  }
}
</script>
<style lang="less" scoped>
.find {
  .content {
    padding: 0 @p15;
    .tag {
      padding: 5px 6px;
      margin-right: 15px;
      margin-bottom: 20px;
    }
    .chart {
      transition: all 0.5s;
      overflow: hidden;
      .chart-item {
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .c1 {
          margin-right: 10px;
        }
        .c2 {
          flex: 1;
          text-align: right;
          background-color: #ebdfdf;
          height: 16px;
          line-height: 16px;
          border-radius: 10px;
          .num {
            border-radius: 10px;
            color: #fff;
            height: 100%;
            background-color: #fe6d67;
            padding-right: 10px;
          }
        }
        .c3 {
          text-align: center;
          width: 30px;
        }
        .c4 {
          width: 30px;
          text-align: right;
        }
        .down {
          color: #fe6d67;
        }
        .up {
          color: #00d47a;
        }
      }
    }
    .look-more {
      text-align: center;
      font-size: 14px;
      padding: 15px 0;
      .r180 {
        display: inline-block;
        transform: rotate(180deg);
      }
    }
  }
}
</style>
